<template>
    <div>
      <cusTable
        border
        :loading="loading"
        :columns="columns"
        :data="data"
        :bottomClass="['cus-page']"
      >
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <Button
              type="primary"
              size="small"
              :style="{ margin: '0 8px' }"
              @click="onShow(row)"
            >
              详情
            </Button>
          </div>
        </template>
      </cusTable>
      <div class="cus_page">
        <cus-page :data="pages" class="mt_20" @pageChange="getInformationPublishApi()"></cus-page>
      </div>
    </div>
  </template>
        
      <script>
  import { getInformationPublish } from "@/api/organ/business";
  
  export default {
    components: {},
    data() {
      return {
        loading: false,
        value: false,
        ruleValidate: {},
        data: [],
        columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center",
        },
        {
          title: "伙食单位",
          key: "unitName",
          align: "center",
        },
        {
          title: "统计周期",
          key: "statisticalDate",
          align: "center",
        },
        {
          title: "提交时间",
          // key: "submitTime",
          sortable: true,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {},
                },
                new Date(params.row.submitTime).Format('yyyy-MM-dd')
              ),
            ]);
          },
        },
        // {
        //   title: "审核状态",
        //   key: "auditStatus",
        //   align: "center",
        //   render: (h, params) => {
        //     return h("div", [
        //       h(
        //         "span",
        //         {
        //           style: {
        //             padding: '5px',
        //             color: '#FFFFFF',
        //             background: params.row.auditStatus == 1 ? '#66CC33' : '#FF0033'
        //           },
        //         },
        //         // 审核状态:0 未提交;1:已提交
        //         params.row.auditStatus == 1 ? '已提交' : '未提交'
        //       ),
        //     ]);
        //   },
        // },
        {
          title: "提交状态",
          key: "submitStatus",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    padding: '5px',
                    color: '#FFFFFF',
                    background: params.row.submitStatus == 1 ? '#66CC33' : '#FF0033'
                  },
                },
                // 提交状态:0 未提交;1:已提交
                params.row.submitStatus == 1 ? '已提交' : '未提交'
              ),
            ]);
          },
        },
        {
          title: "备注",
          key: "remark",
          align: "center",
        },
        {
          title: "操作",
          width: 245,
          fixed: "right",
          slot: "operation",
          align: "center",
        },
      ],
        pages: {
          page: 1,
          pageSize: 10,
          pageTotal: 0,
        },
        tableHeight: 0,
      };
    },
    props: {
    form: {
      type: Object,
      default: () => {}
    },
  },
    mounted() {
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 325; // 表格自适应高度
      }, 100);
      window.addEventListener("resize", this.tableHeightChange, true);
      this.onInit()
    },
    destroyed() {
      window.removeEventListener("resize", this.tableHeightChange, true);
    },
    methods: {
      onShow(row) {
        this.$router.push({
          // 价格指数波动汇总图
          name: "价格指数波动汇总图",
          query: {
            id: row.id
          }
        });
      },
      onInit() {
      this.pages.page = 1;
      this.getInformationPublishApi();
    },
      // 列表接口---------------------------接口
     getInformationPublishApi() {
      this.loading = true;
      return new Promise((resolve) => {
        getInformationPublish({
          // auditStatus: this.form.organAuditState,      // 审核状态:0 未审核;1:已审核
          submitStatus: this.form.submitStatus, //提交状态
          statisticalDate: new Date(this.form.statisticalDate).Format('yyyy'), // 统计日期
          unitCode: this.form.unitCode, // 伙食单位
          type: 2, // 录入数据的类型:(1:重点食材;2:价格指数波动;4:年伙食费开支5:食物消耗;7:营养达标)
          currentPage: this.pages.page,
          pageSize: this.pages.pageSize,
        }).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.data = res.data.list; 
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
      tableHeightChange() {
        this.tableHeight = 0;
        setTimeout(() => {
          this.tableHeight = window.innerHeight - 365; // 表格自适应高度
        }, 100);
      },
    },
    component: {},
  };
  </script>
      <style lang="less" scoped>
  .content-top {
    padding: 24px 0 0 24px;
  }
  ::v-deep .ivu-table-wrapper-with-border {
    border-radius: 6px;
  }
  </style>